<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="breadcrumb-container input-val-box">
          <div class="search_box">
            <el-input v-model="editForm.name" placeholder="名称" @keyup.enter.native="searchBtn" size="small"
                      class="w-140 mr-10"></el-input>
          </div>
          <el-button type="primary" @click="searchBtn" size="small" plain><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>重置</el-button>
          <el-button type="primary" @click.native="eidtBook(0)" size="small" plain>添加摇号</el-button>
          <span class="allbook">总 {{ page.total }} 条数据</span>
        </div>
      </div>
      <!--本体列表，数据 -->
      <el-table
        ref="multipleTable"
        :data="arryList"
        :stripe="tableStripe"
        :border="tableBorder"
        tooltip-effect="dark"
        header-cell-class-name="table-text-c"
        cell-class-name="table-text-c">
        <el-table-column
          align="center"
          prop="id"
          label="序列号"
          width="70">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="摇号事项">
        </el-table-column>
        <el-table-column
          align="center"
          prop="editor"
          label="参与人身份"
          width="100">
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? '教职工' : '家长/学生' }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="number"
          label="参与人数"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="number"
          label="摇中个数"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="position"
          label="事项状态"
          width="100">
          <template slot-scope="scope">
            <span :style="{'color':scope.row.is_end?'green':'red'}">{{ scope.row.is_end ? '已结束' : '未开始' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="draw_time"
          label="开签时间"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="create_time"
          label="创建时间"
          width="100">
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <!--// handleEdit-->
            <el-button size="small" @click="eidtBook(scope.row.id)">查看详情</el-button>
            <el-button size="small" @click="gotoluck(scope.row.id)" v-if="!scope.row.is_end">开始摇号</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          :page-size="page.pagesize"
          :current-page="page.pageindex"
          layout="total, prev, pager, next"
          :total="page.total"
          @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <showDrawPopup :visible.sync="drawVisible" :drawId="drawId" @InitFn="InitFn"></showDrawPopup>
    <editDetail :visible.sync="detailVisible" :pageId="detailId"></editDetail>
    <div class="height40"></div>
  </div>
</template>

<script>
import {pagination, yearDay} from '@/utils/util.js';
import showDrawPopup from "./showDrawPopup";
import editDetail from "./Add"

export default {
  components: {
    showDrawPopup,
    editDetail
  },
  data() {
    return {
      detailVisible: false,
      detailId: 0,
      drawVisible: false,
      progressVisible: false,
      progressPercent: 0,
      rankingVisible: false,
      rankingType: 1,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      searchWord: '', // 搜索名称
      editLoading: false, // 编辑界面按键缓存
      iframeState: false,
      iframeSrc: '',
      dialogVisible: false, // 删除咨询页
      bookName: '', // 删除书名
      bookEtelId: '', // 删除书名id
      tieleName: '',

      arryList: [], // 数据列表
      handleSelection: [], // checked选中框
      // 页数
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      // 分类列表
      tableList: [], // 一级分类
      sonselectList: {}, // 二级分类
      sonseSearchlectList: [],
      search_first_id: '',
      search_son_id: '',
      searchCatId: '',
      // 添加图书弹窗参数
      editFormVisible: false, // 弹窗状态
      ditType: '',
      eidtOption: '',
      editForm: {
        name: ''
      },
      code_number: 0,
      isFirstEnter: false,
      sum: 0,
      drawId: 0
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.editForm.p = this.page.pageindex
      this.$fetch(this.api.giftDraw.index, this.editForm).then((response) => {
        if (response.code === 0) {
          for (let i in response.list.data) {
            response.list.data[i].draw_time = response.list.data[i].draw_time ? yearDay(response.list.data[i].draw_time) : ''
            response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
          }
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 搜索
    searchBtn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    // 添加抽签，查看详情
    eidtBook(id) {
      // this.$router.push(index === 'add' ? 'luckDrawAdd/index' : 'luckDrawAdd/index?id=' + this.arryList[index].id)

      this.detailId = id
      this.detailVisible = true
    },
    initFile() {
      this.InitFn()
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.editForm.name = ''
      this.InitFn()
    },
    // 去抽奖
    gotoluck(id) {
      this.drawId = id;
      this.drawVisible = true;
    },
  },
  mounted() {
  },
  // 缓存机制 star
  beforeRouteEnter(to, from, next) {
    // 利用路由元信息中的 meta 字段设置变量，方便在各个位置获取。这就是为什么在 meta 中定义 isNeedRefresh。
    // 当从详情页返回时，将 isNeedRefresh 设为 false，表示不刷新数据
    if (to.meta.isNeedRefresh) {
      this.InitFn() // 详情页面需要刷新数据
    }
    next()
  },
  beforeRouteLeave(to, from, next) {
    // isNeedRefresh 进入页面判断是否需要刷新
    if (to.meta.isNeedRefresh) {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  }
  // 缓存机制 end
}
</script>
<style scoped>

</style>
